<script>
export default {
  name: "scanBtn",
  data() {
    return {}
  },
  props: {
    location: {
      type: String,
      default: 'right'
    },
    color:{
      type:String,
      default: '#ffffff'
    },
    icon: {
      type: String,
      default: '/static/images/ant/saoma.png'
    },
    size:{
      type: String,
      default: 'primary'
    },
    text: {
      type: String,
      default: '扫码'
    },

  },
  methods: {
    // 扫描二维码方法
    scanQRCode() {
      uni.scanCode({
        success: (res) => {
          this.$emit('scan', res.result);
        },
        fail: (err) => {
          uni.showToast({
            title: '扫码失败',
            icon: 'none'
          });
        }
      });
    },
  }
}
</script>

<template>
  <view :class='["scan-"+location,"scan-"+size]' :style="{
    background:color
  }" @tap="scanQRCode">
    <image :src="icon" mode="aspectFit" :class="'scan-icon-'+size"></image>
    <text>{{ text }}</text>
  </view>
</template>
<style scoped lang="scss">
.scan-mini {
  padding: 12rpx 14rpx;
  width:120rpx;
  height:50rpx;
}
.scan-icon-mini {
  width: 48rpx;
  height: 48rpx;
  margin-right: 4rpx;
}
.scan-mini text {
  font-size: 24rpx;
  color: #333333;
}

.scan-primary {
  width:240rpx;
  height:80rpx;

}
.scan-icon-primary {
  width: 60rpx;
  height: 60rpx;
  margin-right: 12rpx;
}
.scan-primary text {
  color: #333333;
  font-size: 28rpx;
}

.scan-right {
  position: fixed;
  top: 20rpx;
  right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 59, 144, 0.3);
  z-index: 100;
}

.scan-bottom {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 59, 144, 0.3);
  z-index: 100;
}




</style>
